<template>
    <div>
        <div id="allmap"></div>
          <!-- 2. allmap要在下面样式设置高度不然不展示-->
              <div class="top">
                <router-link to="/home/city">
                  <p>{{area}}</p> 
                  </router-link>
                       <router-link to="/home/search" class="inSearsh">
                         <van-search v-model="value" placeholder="搜索商品" />
                       </router-link>
                   </div>
                    <!-- 1.轮播 -->
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="item in bannerItem" :key="item.id">
                        <img :src="item.image_url" alt="">
                        </van-swipe-item>
                    </van-swipe>
                       <!-- 居家 -->
                     <ul class="channel">
                <router-link :to="`category/categorylist?id=${item.id}`" tag="li"
                 v-for="item in channel" :key="item.id">
                   <img :src="item.icon_url" alt />
                     <p>{{item.name}}</p>
                </router-link>
                     <!-- <li v-for="item in channel" :key="item.id">
                        <img :src="item.icon_url" alt="">
                        <p>{{item.name}}</p>
                    </li> -->
                    </ul>
                    <div class="gray"></div>
                    <!-- 3.品牌制造商直供 点击标题跳转 -->
                      <router-link tag="header" :to="`/home/brand/brandlist`">品牌制造商直供
                      </router-link>
                      <!-- 3-1点击图片跳转 -->
                     <div class="brandList" >
                           <router-link tag="div" :to="`/home/brand?id=${item.id}`" v-for="item in brandList" :key="item.id"
                           class="img" :style="`background:url(${item.new_pic_url}) no-repeat center; background-size:contain`">
                           <p>{{item.name}}</p>
                           <p>{{item.floor_price}}元起</p>
                           </router-link>
                    </div>
                    <!-- 4 -->
                        <!-- <div class="goodtop"> -->
                            <router-link  tag="div" class="goodtop" to="/home/goodtop">
                            <div class="text">
                            <p>新品首发</p>
                            <p>查看全部</p>
                            </div>
                            </router-link>
                        <!-- 商品列表 -->
                        <div class="newgoods">
                        <ul class="list">
                             <router-link tag="li" class="newgoods" :to="`/home/newgoods?id=${item.id}`"
                     v-for="item in newGoods" :key="item.id">
                                <img :src="item.list_pic_url" alt="">
                                <div class="lists">
                                    <p>{{item.name}}</p>
                                    <p>{{item.goods_brief}}</p>
                                    <p>{{'￥'+item.retail_price}}</p>
                                </div>
                             </router-link>
                            </ul>
                        </div>
                   
                  <!-- 5.人气推荐 -->
                        <!-- <div class="pinktop"> -->
                            <router-link tag="div" class="pinktop" to="/home/pinktop">
                            <div class="text">
                            <p>人气推荐•好物精选</p>
                            <p>查看全部</p>
                            </div>
                       </router-link>
                    <div class="hotGoods">
                         <ul class="list">
                             <router-link tag="li" class="hotGoods" :to="`/home/hotGoods?id=${item.id}`"
                              v-for="item in hotGoods" :key="item.id">
                                <!-- <li v-for="item in hotGoods" :key="item.id"> -->
                                <img :src="item.list_pic_url" alt="">
                                <div class="lists">
                                    <p>{{item.name}}</p>
                                    <p>{{item.goods_brief}}</p>
                                    <p>{{'￥'+item.retail_price}}</p>
                                </div>
                                </router-link>
                            </ul>
                    </div>
                <!-- 专题精选 -->
                <div class="topicList-top"> 专题精选 
                 <span  class="icon"></span></div>
                 <div class="topicList">
                     <ul class="list">
                 <router-link tag="li" class="topicList" :to="`/home/topicdetail?id=${item.id}`"
                              v-for="item in topicList" :key="item.id">
                         <img :src="item.item_pic_url" alt="">
                         <div class="txt">
                         <p>{{item.title}}</p>
                        <p>{{item.price_info}}元起</p>
                         </div>
                        <p>{{item.subtitle}}</p>
                 </router-link>
                     </ul>
                 </div>
                 <!-- 好物 双层循环 -->
                 <div>
                 <div class="newCategoryList" v-for="item in newCategoryList" :key="item.id">
                 <p class="subtxt">{{item.name}}好物</p>
                    <ul>
                        <!-- <li v-for="goods in item.goodsList" :key="goods.id"> -->
                        <router-link tag="li" class="newCategoryList" :to="`/home/newCategoryList?id=${goods.id}`"
                              v-for="goods in  item.goodsList" :key="goods.id">
                        <img :src="goods.list_pic_url" alt="">
                        <p>{{goods.name}}</p>
                        <p>￥{{goods.retail_price}}</p>
                        <!-- </li> -->
                         </router-link>
                    <!-- <li> -->
                        <router-link tag="li" :to="`category/categorylist?id=${item.id}`">
                        <p class="right">{{item.name}}好物</p>
                        <img class="icon" src="../../assets/icon.png" alt="">
                        </router-link>
                    <!-- </li> -->
                    </ul>
                    </div>
                 </div>
    </div>
</template>

<script>
    import {index} from "@/api/home";
    import {mapMutations, mapState} from "vuex"//7
    export default {
        data(){
            return{
               area:"",//5
               value:"",
               bannerItem:"",
               channel:"",
               brandList:"",
               newGoods:"",
               hotGoods:"",
               topicList:"",
               newCategoryList:""
              
            };
    
        },
        // 3.实例化百度地图
            mounted() {
            var _this=this//自己加上this 下面写area展示到页面
            var map = new BMap.Map("allmap");    // 创建Map实例GL删掉
	         map.centerAndZoom(new BMap.Point(113.754407,34.776794), 18);  // 改成郑州的经纬度,初始化地图,设置中心点坐标和地图级别
            // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	        // map.setHeading(64.5);
            // map.setTilt(73);
        //   4.浏览器定位实例化  geolocation    
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                console.log(r);//打印一下r这个数据
                _this.area=r.address.city;//5.页面中获取到城市
                _this.setInfo(r);//8.传值r到定位详情
            // var mk = new BMap.Marker(r.point);
            // map.addOverlay(mk);
			// map.panTo(r.point);
			// alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
    },
    // 7.
    methods: {
        ...mapMutations(['setInfo','setMap'])
    },
    computed:{
        ...mapState(['cityInfo'])
    },
    // 请求数据
    created(){
        index().then((res)=>{
            console.log(res);
            this.bannerItem=res.banner;
            this.channel=res.channel;
            this.brandList=res.brandList;
            this.newGoods=res.newGoods;
            this.hotGoods=res.hotGoods;
            this.topicList=res.topicList;
            this.newCategoryList=res.newCategoryList
        });
    }
    };
</script>

<style lang="scss" scoped>
.top {
  width: 98%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;

  .inSearsh {
    width: 85%;
    .van-search {
      padding-right: 0;
    }
  }
}
.my-swipe {
  width: 100%;
  height: 210px;
  margin-bottom: 10px;
  img {
    width: 100%;
    height: 100%;
  }
}
.channel{
    width: 90%;
    display: flex;
   justify-content: space-between;
   flex-wrap: nowrap;
   height: 60px;
   width: 100%;
   img{
       width: 30px;
       height: 30px;
       margin-left: 20px;
       margin-right: 20px;
   }
}
.gray{
    margin-top: 15px;
    width: 100%;
    height: 8px;
    background-color:#f4f4f4;
}
header{
    height: 50px;
    line-height: 50px;
}
.brandList{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    // height: 210px;
    // margin-bottom: 20px;
    .img{
    width:50%;
    height: 116px;
    justify-content: space-between;
    margin-bottom: 4px;
   p{
       display: flex;
       flex-wrap: wrap;
        margin-left: 5px;
   }
}
}
 .goodtop{
     font-size: .42667rem;
    margin-top: 10px;
    height: 3.46667rem;
    width: 100%;
    background: url() no-repeat;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    p:nth-child(2){
        width: 2.4rem;
    height: .66667rem;
    line-height: .66667rem;
    margin: .36rem auto 0 auto;
    font-size: .29333rem;
    background: #d8e4f0;
    }
 }
.newgoods{
    width: 100%;
    overflow-x: auto;
    .list{
        width: 664px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            width: 166px;
            img{
                width: 120px;
                height: 120px;
            }
             .lists{
            width: 120px;
            margin: 0 auto;
            p{
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            p:nth-child(1){
                font-weight: 600px;
                font-size: 16px;

            }
             p:nth-child(2){
                 color: #8a8a8a;
                 font-size: 12px;
                margin-top: 16px;
                margin-bottom: 16px;
            }
              p:nth-child(3){
                  color: red;
              }
        }
     }
    }
}
// 第六块
.pinktop{
    margin-bottom: 10px;
    margin-top: 10px;
    height: 3.46667rem;
    width: 100%;
    background: url() no-repeat;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    p:nth-child(2){
        width: 2.4rem;
    height: .66667rem;
    line-height: .66667rem;
    margin: .36rem auto 0 auto;
    font-size: .29333rem;
    background:#f4e9cb;;
    }
 }
.hotGoods{
    width: 100%;
    overflow-x: auto;
    .list{
        width: 664px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            width: 166px;
            img{
                width: 120px;
                height: 120px;
            }
             .lists{
            width: 120px;
            margin: 0 auto;
            p{
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            p:nth-child(1){
                font-weight: 600px;
                font-size: 16px;

            }
             p:nth-child(2){
                 color: #8a8a8a;
                 font-size: 12px;
                margin-top: 16px;
                margin-bottom: 16px;
            }
              p:nth-child(3){
                  color: red;
              }
        }
     }
    }
}
// 专题精选
.topicList-top {
    height: 47px;
    // line-height: 47px;
    // width: 100%;
    // margin: 0 auto;
    // text-align: center;
    // padding: .48rem;
    // vertical-align: middle;
    .icon{
    display: inline-block;
    width: .42667rem;
    height: .42667rem;
    margin-left: .06667rem;
    background: url() no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;

    }
}
// 鞋
.topicList{
    width: 100%;
    overflow-x: auto;
    .list{
        width: 740px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            width: 287px;
            height: 250px;
            margin-right: 10px;
            img{
                width: 100%;
                height: 162px;
            }
            .txt{
                // width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                 text-overflow: ellipsis;
                white-space: nowrap;
             .txt-l{
                 display: flex;
                  width: 75%;
                  overflow: hidden;

                // text-align: left;
                // overflow: hidden;
               
                // font-weight: 600px;
                font-size: 16px;
             }
             .txt-r{
                // overflow: hidden;
                // text-overflow: ellipsis;
                width: 20px;
                white-space: nowrap;
                  color: red;
              }
                }
        }
        }
    
}
//居家好物
.htitle{
    width: 100%;
    height: 40px;
    background-color:#f4f4f4;
}
// 双嵌套
.newCategoryList{
    overflow: hidden;
    width: 100%;
    background-color: #f4f4f4;
    .subtxt{
        margin: 15px auto;
    }
        ul{ 
            width: 365px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                width: 180px;
                background-color: white;
                margin-bottom: 5px;

                img{
                    width: 151px;
                    height: 151px;
                }
                
                p{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 12px;
                    margin-top: 16px;
                    text-align: left;

                }
                p:nth-child(3){
                    margin-bottom: 10px;
                    // margin-top: 10px;
                }
            
            .right{
              
                margin: 0 auto;
                text-align: center;
                margin-top: 20%;
                margin-bottom: 40px;
                
            }
            .icon{
                    width: 35px;
                    height: 35px;
                    margin: 0 auto;
                    
                }
            }
        
            
        
    }
}
</style>